import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';
import Typography from '@/pages/OrderModule/common/components/Typography';
import { Alert, Space, Radio } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import PriceFormat from '../../components/PriceFormat';
import Api from '../../service';
import { useEffect, useState } from 'react';
import { countOrderSum } from '../../utils/checkOrderConfig';
import { updateOrderStatus } from '../../utils/orderStatus';
import { renderAmountDesc } from '../../utils/utils';

const amountEl = renderAmountDesc();

/** 转正常单 */
function SetOrderStatusForNormalModal(props) {
	const { item, selectKeys, orderList, handleOk, handleCancel } = props;
	const { scene } = item;
	//当前是操作还是取消
	const [isOk, setIsOk] = useState(false);

	const [loading, setLoading] = useState(false);

	//预览数据
	const [previewData, setPreviewData] = useState({});

	const [open, setOpen] = useState(false);

	const [refundType, setRefundType] = useState(1);

	useEffect(() => {
		getPreviewData();
		setOpen(true);
	}, [])


	//获取预览数据
	const getPreviewData = async () => {
		setLoading(true);
		const params = {
			orderIds: selectKeys,
		}
		const { success, data } = await Api.normalOrder(params);
		if (success) {
			setPreviewData(data);
		}
		setLoading(false);
	}

	const onOk = () => {
		setLoading(true);
		updateOrderStatus(scene, {
			orderIds: selectKeys,
			tradeNo: previewData.tradeNo,
			refundOrderStrategy: refundType
		}, (val) => {
			setLoading(false);
			if (val) {
				setIsOk(true);
				setOpen(false);
			}
		})
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			handleOk()
		} else {
			handleCancel();
		}
	}

	//异常的订单
	const orderCount = countOrderSum(scene, selectKeys, orderList);


	//待退商品确认
	const renderWaitRefund = () => {
		const { refundedOrderNum } = previewData;
		if (refundedOrderNum > 0) {
			return (
				<>
					<SubTitle
						symbol
						title="待退商品确认"
						as="s2"
						extraText="（针对已支付的异常代发订单，转正常将会对金额进行处理）"
					/>
					<div style={{ fontWeight: 500, color: '#333', marginBottom: '24px' }}>
						<div style={{ margin: '12px 0' }}>勾选订单里，目前<span style={{ color: '#ff2d51' }}>{refundedOrderNum}</span>个订单含有“<span style={{ color: '#ff2d51' }}>待退款</span>“商品，这种订单三方平台用户还未退款完成，请确认以下处理方式</div>
						<Radio.Group onChange={e => setRefundType(e.target.value)} value={refundType}>
							<Space direction="vertical">
								<Radio value={1}>转正常跳过”待退“商品订单</Radio>
								<Radio value={2}>拆出”待退“商品，其他正常商品转正常</Radio>
								<Radio value={3}>继续转正常</Radio>
							</Space>
						</Radio.Group>
					</div>
				</>
			)
		}
		return null;
	}


	//金额渲染
	const renderAmount = () => {
		const { resultHandleType, refundAmountCount = {} } = previewData;
		if (resultHandleType == 2) {
			return (
				<>
					<SubTitle
						symbol
						title="金额处理"
						as="s2"
						extraText="（针对已支付的异常代发订单，转正常将会对金额进行处理）"
						helpInfo={{
							content: amountEl,
						}}
					/>
					<div style={{ fontWeight: 500, color: '#333' }}>
						<div style={{ marginTop: 16 }}>
							退回金额：
							<PriceFormat price={refundAmountCount.totalPayAmount} />
							（含运费
							<PriceFormat price={refundAmountCount.logisticsAmount} />
							、包材费
							<PriceFormat price={refundAmountCount.packedAmount} />
							、服务费
							<PriceFormat price={refundAmountCount.serviceAmount} />）
						</div>
						<div style={{ marginTop: 12 }}>
							退货退款：
							<PriceFormat price={refundAmountCount.refundGoodsAmount} />
						</div>
					</div>
				</>
			)
		}
		return null;
	}


	return (
		<CommonModal title={{ title: "转正常单" }} afterClose={afterClose} open={open} width="640px" onOk={onOk} onCancel={onCancel}>
			<Alert style={{ marginBottom: '16px' }} showIcon message={<Typography as="s1">转正常单后，订单回到“待审核”！</Typography>} />
			<Typography color="#333">异常订单数量： {orderCount}</Typography>
			<div style={{ margin: '16px 0 24px' }}>
				<Typography color="#333">是否确认转正常单？</Typography>
			</div>
			{renderWaitRefund()}
			{renderAmount()}
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default SetOrderStatusForNormalModal;
